import React from 'react'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { Space, Tooltip } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import style from './TypeTagList.module.less'
import { colors } from '@js/config'
import CaseNote from '@components/CaseNote/Index'
const outsideList = ['港', '澳', '台', '外国']
class TypeTagList extends Component {
  state = {
    colorList: colors
  }

  // 前往系列案列表
  toSeriesCase (data) {
    this.props.addWindow({ id: `seriesCaseDetail-${data.id}`, title: `系列案-${data.serieno}`, componentName: 'SeriesCaseDetail', forceRefresh: false, meta: { id: data.id, editable: false } })
  }

  getHasOut () {
    const d = this.props.caseDetail || {}
    const applicants = d.applicants || []
    const respondents = d.respondents || []
    const partyAreas = [...applicants, ...respondents].map(li => li.area)
    return partyAreas.some(li => outsideList.indexOf(li) !== -1)
  }

  renderTag (showTag, tagName, color = this.state.colorList[0], title, cursor = false, clickHandle = () => {}) {
    if (!showTag) {
      return null
    }
    const s = { backgroundColor: color }
    if (cursor) {
      s.cursor = 'pointer'
    }
    if (title) {
      return (
        <Tooltip title={title}>
          <span className={style.tag} style={s} onClick={clickHandle}>{tagName}</span>
        </Tooltip>
      )
    }
    return (
      <span className={style.tag} style={s} onClick={clickHandle}>{tagName}</span>
    )
  }

  render () {
    const d = this.props.caseDetail
    const l = this.state.colorList
    const hasOut = this.getHasOut()
    if (!d) {
      return <div />
    }
    return (
      <div className={style.container}>
        <Space>
          {this.renderTag(!!d.delay_day, '暂缓', l[1])}
          {this.renderTag(!!d.serieno, '系列', l[2], `系列号：${d.serieno}`, true, () => this.toSeriesCase(d.serienoInfo))}
          {this.renderTag(hasOut || !!d.foreign_related_type, '涉外', l[4], d.foreign_related_type || '主体涉外', true)}
          {this.renderTag(d.casetype === '金融案件', '金融', l[3], d.casesubtype, true)}
          <CaseNote caseid={d.id} caseno={d.caseno_desc || d.case_no || d.acceptno_desc || d.acceptno} refreshFn={() => this.props.refreshFn()} onlyadd>
            {/* {this.renderTag(true, !d.note ? <Space size={2}><span>笺</span><PlusOutlined /></Space> : '笺', l[11], '', true)} */}
            {this.renderTag(true, <Space size={2}><span>笺</span><PlusOutlined /></Space>, l[11], '', true)}
          </CaseNote>
        </Space>
      </div>
    )
  }
}

TypeTagList.propTypes = {
  caseDetail: PropTypes.object,
  refreshFn: PropTypes.func
}

TypeTagList.defaultProps = {
  caseDetail: {},
  refreshFn: () => {}
}

const mapState = mapStateToProps(function (state) {
  return {

  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {

  }
})

export default connect(mapState, mapDispatch)(TypeTagList)
